


iMessage Skin

by Azdaema Codes (Azdaema)



Series: Azdaema's AO3 Messaging Skins [1]
Category: AO3 fandom, No Fandom
Genre: Fanwork Research & Reference Guides, Metafiction, Other, Work Skin, ao3 skin, because oh how i love this site, valentine's day gift to ao3
Language: English
Status: Completed
Published: 2020-02-14
Updated: 2020-05-19
Packaged: 2021-02-27 23:01:47
Rating: Teen And Up Audiences
Warnings: Creator Chose Not To Use Archive Warnings
Chapters: 11
Words: 2,610
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/22703617
Author URL: https://archiveofourown.org/users/Azdaema/pseuds/Azdaema%20Codes
Summary: iMessage as it looks in iOS 7 to present.
Relationships: AO3 Skins & You
Series: Azdaema's AO3 Messaging Skins [1]
Series URL: https://archiveofourown.org/series/1642099
Kudos: 30





	1. Intro

**Author's Note:**

  * Inspired by [How to Make iOS Text Messages on AO3](https://archiveofourown.org/works/6434845) by [CodenameCarrot](https://archiveofourown.org/users/CodenameCarrot/pseuds/CodenameCarrot), [La_Temperanza](https://archiveofourown.org/users/La_Temperanza/pseuds/La_Temperanza). 
  * Inspired by [iOS CSS Chat Message Bubbles](https://archiveofourown.org/external_works/622513) by Mark Swardstrom. 
  * Inspired by [ios7 Messages UI](https://archiveofourown.org/external_works/622516) by 2ne. 



Here's what this skin can do:

## Numerius Negidius

####  **Today** , 11:45 AM

Aulus
    Look what they're selling at the forum
    
    Do you want me to get you one??

Numerius
    YES
    💖
    youre the best

####  **Today** , 3:21 PM

Numerius
    okay listen but what if we MADE OUR OWN
     [ **Forging a Roman Gladius Sword** youtube.com ](https://www.youtube.com/watch?v=DdRrXZoQ8wo)

Aulus
    I mean I already bought them
    so

**Read** 3:25

Numerius
    nvm then
    

``

The github page for it is [here](https://github.com/Azdaema/AO3-Skin_Messaging/tree/master/iMessage). The CodePen page is [here](https://codepen.io/Azdaema/pen/yLNBywJ).

These are the core principles I held to when designing this.

  1. When someone presses "Hide Creator's Style," it doesn't have to be _pretty_ , but it should at least be _coherent_. 
    1. You can tell which person wrote which messages.
    2. The different aspects—the texts, the character's names, the timestamps, etc—are distinct from each other.
  2. The HTML side of it should be as simple as possible.



When someone presses "Hide Creator's Style" on AO3, the skin is turned off, and the page falls back on AO3's default properties for the HTML tags. For this reason, I based it around a [`<dl>` list](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl). The basic setup is that `<dt>` is used for the characters' names, and `<dd>` is used for the texts themselves.

here's a `<dt>`
    here's a `<dd>`
    and another `<dd>`
and another `<dt>`
    see?

Each section of a `<dt>` and it's following `<dd>` is wrapped in a `<div>` which either one of these two classes:

  * `"out"` (outcoming, sent from the POV phone)
  * `"in"` (incoming, sent from another phone)



For contact headers and time headers, I like to use the header tags so they look distinct in "Hide Creator's Style." Here's what the various headers look like:

# header1

## header2

### header3

#### header4

##### header5

###### header6

I like `<h1>` or `<h2>` for contact headers, and `<h4>` and `<h5>` for time headers. If you want to use `<h3>` or `<h6>`, you need to add a line `border: none;` to the skin.


	2. Basics

### Skin
    
    
    /* wrapper */
    .imessage {
    	width: 100%;
    	max-width: 320px;
    	font-family: "Helvetica Neue", Helvetica, sans-serif;
    	display: table;
    	margin: auto;
    }
    
    /* characters's names hidden */
    .imessage dt {
    	display: none;
    }
    
    /* space for the tails */
    .imessage .in,
    .imessage .out {
    	margin-left: 0.625rem;
    	margin-right: 0.625rem;
    }
    
    /* shared text features */
    .imessage .in dd,
    .imessage .out dd {
    	line-height: 1.3em;
    	margin: 1px 0;
    	border-radius: 1em;
    	padding: 0.45em 0.9em;
    	max-width: 70%;
    	clear: both;
    	position: relative;
    	z-index: 1;
    }
    
    /* tails */
    .imessage .in dd:last-of-type::after,
    .imessage .out dd:last-of-type::after {
    	content: "";
    	position: absolute;
    	bottom: 0;
    	width: 0.625rem;
    	height: 1rem;
    	z-index: -1;
    }
    
    /* the last part in a text series has more space after it
     * (not necessarily a text, could be a read receipt) */
    .imessage .in dd:last-child,
    .imessage .out dd:last-child {
    	margin-bottom: 1rem;
    }
    
    /* outgoing details */
    .imessage .out dd {
    	float: right;
    	background: #007aff;
    	color: white;
    }
    .imessage .out dd:last-of-type::after {
    	right: -0.625rem;
    	border-left: 0.625rem solid #007aff;
    	border-bottom-left-radius: 1.25rem 0.625rem;
    }
    
    /* incoming details */
    .imessage .in dd {
    	float: left;
    	background: #e5e5ea;
    	color: black;
    }
    .imessage .in dd:last-of-type::after {
    	left: -0.625rem;
    	border-right: 0.625rem solid #e5e5ea;
    	border-bottom-right-radius: 1.25rem 0.625rem;
    }
    

### Demo
    
    
    <dl class="imessage">
    
    <div class="in">
    <dt>Alice</dt>
    <dd>are you there yet?</dd>
    <dd>Where are you?</dd>
    </div>
    
    
    <div class="out">
    <dt>Bob</dt>
    <dd>I'm waiting outside</dd>
    <dd>wait I can see you now</dd>
    </div>
    
    </dl>

Alice
    are you there yet?
    Where are you?

Bob
    I'm waiting outside
    wait I can see you now


	3. Emojis

### Skin
    
    
    /* no tail */
    .imessage dd.emoji::after {
      display: none;
    }
    
    /* 3x emoji */
    .imessage dd.emoji {
      background: none;
      border-radius: 0;
      padding-left: 0;
      padding-right: 0;
      font-size: 3rem;
    }
    

### Demo
    
    
    <div class="out">
    <dl class="imessage">
    
    <div class="in">
    <dt>Bob</dt>
    <dd>Good morning</dd>
    </div>
    
    <div class="out">
    <dt>Alice</dt>
    <dd class="emoji">💖💖💖</dd>
    </div>
    </div>

Bob
    Good morning

Alice
    💖💖💖


	4. Photos

### Skin
    
    
    /* no tail */
    .imessage dd.pic::after {
      display: none;
    }
    
    /* picture */
    .imessage dd.pic {
      background: none;
      padding: 0;
      overflow: hidden;
    }
    .imessage dd.pic img {
      max-width: 100%;
      display: block;
    }

### Demo
    
    
    <dl class="imessage">
    
    <div class="out">
    <dt>Aulus</dt>
    <dd>Look what they're selling at the forum</dd>
    <dd class="pic"><img src="https://raw.githubusercontent.com/Azdaema/AO3-Skin_Messaging/master/gladius.jpg" /></dd>
    <dd>Do you want me to get you one??</dd>
    </div>
    
    </dl>

Aulus
    Look what they're selling at the forum
    
    Do you want me to get you one??


	5. Timestamps

### Skin
    
    
    .imessage .time {
      clear: both;
      font-weight: normal;
      color: #8e8e93;
      font-size: 0.75rem;
      display: block;
      text-align: center;
      margin: 0;
      padding: 1rem;
    }
    

### Demo

I reccomend using `<h4>` and `<h5>` for time headers, so then they'll look distinct in "Hide Creator's Style." If you want to use `<h34>` or `<h6>`, you need add the line `border: none;` to the skin.
    
    
    <dl class="imessage">
    
    <h4 class="time"><b>Today</b>, 11:45 AM</h4>
    
    <div class="out">
    <dt>Alice</dt>
    <dd>Can we talk?</dd>
    </div>
    
    <h4 class="time"><b>Today</b>, 2:11 AM</h4>
    
    <div class="out">
    <dt>Alice</dt>
    <dd>I'm sorry</dd>
    <dd>I'm so sorry just please talk to me</dd>
    </div>
    
    </dl>

####  **Today** , 11:45 AM

Alice
    Can we talk?

####  **Today** , 2:11 AM

Alice
    I'm sorry
    I'm so sorry just please talk to me

In iOS, if you send multiple texts in a rapid series, they "nest" together, with only the last message getting a tail. If you send messages a few minutes apart, they will not do this.

In order to replicate it, put them in separate `div` tags:
    
    
    <div class="out">
    <dt>Alice</dt>
    <dd>I'm sorry</dd>
    <dd>I'm so sorry just please talk to me</dd>
    </div>
    
    <div class="out">
    <dt>Alice</dt>
    <dd>Please I'd do anything</dd>
    </div>

Alice
    I'm sorry
    I'm so sorry just please talk to me

Alice
    Please I'd do anything


	6. Read receipts

### Skin
    
    
    .imessage .out .read {
      clear: both;
      font-weight: normal;
      color: #8e8e93;
      font-size: 0.75rem;
      float: right;
      display: table;
      padding: 0;
      margin: 0;
    }

### Demo
    
    
    <dl class="imessage">
    
    <div class="out">
    <dt>Mimi</dt>
    <dd>Can I copy your homework?</dd>
    <p class="read"><b>Read</b> 5:55 PM</p>
    </div>
    
    </dl>

Mimi
    Can I copy your homework?

**Read** 5:55 PM


	7. Group Texts

### Skin
    
    
    /* show the names with incoming texts for grouptext mode */
    .imessage.grouptext .in dt {
      clear: both;
      font-weight: normal;
      color: #8e8e93;
      font-size: 0.75rem;
      padding-left: 1em;
      display: table !important;
    }

### Demo

You have to add it to the wrapper:
    
    
    <dl class="imessage grouptext">
    
    <div class="out">
    <dt>Ciri</dt>
    <dd>Who's picking me up today?</dd>
    </div>
    
    <div class="in">
    <dt>Yennefer</dt>
    <dd>its tuesday</dd>
    <dd>so jaskier</dd>
    </div>
    
    <div class="in">
    <dt>Jaskier</dt>
    <dd>no its geralts turn</dd>
    <dd>i swear its his turn</dd>
    </div>
    
    <div class="in">
    <dt>Geralt</dt>
    <dd>no, Yen is right: it's your turn</dd>
    <dd>it's tuesday</dd>
    <dd>Tuesday is always your turn</dd>
    </div>
    
    <div class="in">
    <dt>Jaskier</dt>
    <dd>shit</dd>
    </div>
    
    <div class="in">
    <dt>Yennefer</dt>
    <dd>told you</dd>
    </div>
    
    <div class="in">
    <dt>Jaskier</dt>
    <dd>Ciri i'm so sorry</dd>
    <dd>I'll be there as soon as I can</dd>
    </div>
    
    <div class="out">
    <dt>Ciri</dt>
    <dd>Can I just go over to Dara's today?</dd>
    </div>
    
    </dl>

Ciri
    Who's picking me up today?

Yennefer
    Its tuesday so jaskier

Jaskier
    no its geralts turn
    i swear its his turn

Geralt
    no, Yen is right: it's your turn
    it's tuesday
    Tuesday is always your turn

Jaskier
    shit

Yennefer
    Told you

Jaskier
    Ciri i'm so sorry
    I'll be there as soon as I can

Ciri
    Can I just go over to Dara's today?


	8. Header + Footer

### Skin
    
    
    /**************************************************
    *   Contact header
    **************************************************/
    .imessage .contact {
      position: relative;
      background: #f2f2f7;
      border: 1px solid rgba(60, 60, 67, 0.29);
      margin: 0;
      text-align: center;
      font-size: 1.2em;
      line-height: 3em;
      font-weight: bold;
      white-space: nowrap;
    }
    /* back arrow */
    .imessage .contact::before {
      content: "";
      position: absolute;
      left: 1em;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 0.75em;
      height: 0.75em;
      border-left: 2.5px solid #007aff;
      border-bottom: 2.5px solid #007aff;
      transform: rotate(45deg);
    }
    
    /**************************************************
    *   Type bar footer
    **************************************************/
    .imessage .footer {
      clear: both;
      position: relative;
      margin: 0.25em;
    }
    
    /* camera icon */
    .imessage .footer::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      height: 2em;
      width: 3em;
      background: url("https://raw.githubusercontent.com/Azdaema/AO3-Skin_Messaging/master/FontAwesome/black/fa-camera.png") no-repeat center;
      background-size: auto 1.25em;
      opacity: 0.5;
    }
    
    /*  the bit with a border where you type in the text  */
    .imessage .footer .typebar {
      position: relative;
      display: block;
      font-size: 1rem;
      border: 1px solid rgba(60, 60, 67, 0.29);
      box-sizing: border-box;
      border-radius: 1em;
      margin-left: 3em;
      padding-right: 2.5em;
      padding: 0.25em 1em;
      line-height: 1.5em;
    }
    
    /* Send button */
    .imessage .footer .typebar::before {
      content: "";
      position: absolute;
      bottom: 0;
      right: 0;
      margin: 0.2em;
      height: 1.6em;
      width: 1.6em;
      border-radius: 100%;
      background-image: url("https://raw.githubusercontent.com/Azdaema/AO3-Skin_Messaging/master/FontAwesome/white/fa-arrow-up.png");
      background-repeat: no-repeat;
      background-position: center;
      background-color: #007aff;
      background-size: auto 0.7em;
    }
    
    /* blue caret */
    .imessage .footer .typebar::after {
      content: "";
      border-right: 2px solid #007aff;
    }
    
    /* filler text if typebar is empty */
    .imessage .footer .typebar:empty::after {
      color: rgba(60, 60, 67, 0.29);
      content: "iMessage";
      /* the border is on the left side here, not right */
      border: none;
      border-left: 2px solid #007aff;
    }
    
    /**************************************************
    * border
    **************************************************/
    .imessage.border {
      border: 1px solid rgba(60, 60, 67, 0.29);
    }
    
    .imessage.border .contact {
      border-top: none;
      border-left: none;
      border-right: none;
    }
    

### Demo

You can have an unsent text in the typing bar:
    
    
    <dl class="imessage border">
    <h1 class="contact">Your platonic best friend</h1>
    
    <h4 class="time">
    <b>Today</b>, 8:21 PM</h4>
    
    <div class="in">
    <dt>Friend</dt>
    <dd>I'm leaving for my date now, wish me luck!</dd>
    </div>
    
    <div class="footer">
    <span class="typebar">I'm in love with you</span>
    </div>
    </dl>

# Your platonic best friend

####  **Today** , 8:21 PM

Friend
    I'm leaving for my date now, wish me luck!

I'm in love with you

Or it can be empty, and only be there for the Complete Look™:
    
    
    <dl class="imessage border">
    <h1 class="contact">Your platonic best friend</h1>
    
    <h4 class="time">
    <b>Today</b>, 8:21 PM</h4>
    
    <div class="in">
    <dt>Friend</dt>
    <dd>I'm leaving for my date now, wish me luck!</dd>
    </div>
    
    <div class="footer">
    <span class="typebar"></span>
    </div>
    </dl>

# Your platonic best friend

####  **Today** , 8:21 PM

Friend
    I'm leaving for my date now, wish me luck!

I reccomend using `<h1>` or `<h2>` for the header, so it'll look distinct in "Hide Creator's Style."


	9. SMS

### Skin
    
    
    .imessage.sms .out dd,
    .imessage .out.sms dd {
      background: #34c759;
    }
    .imessage.sms .out dd::after,
    .imessage .out.sms dd::after {
      border-color: #34c759;
    }
    
    /* send button */
    .imessage.sms .typebar::before {
      background-color: #34c759;
    }
    
    /* filler text in footer typebar */
    .imessage.sms .typebar:empty::after {
      content: "Text Message";
    }
    

### Demo

You can do it for the whole set:
    
    
    <dl class="imessage sms">
    <div class="out">
    <dt>Bob</dt>
    <dd>Leaving now</dd>
    </div>
    
    <div class="in">
    <dt>Alice</dt>
    <dd>are you there yet?</dd>
    <dd>Where are you?</dd>
    </div>
    
    <div class="out">
    <dt>Bob</dt>
    <dd>I'm waiting outside</dd>
    <dd>wait I can see you now</dd>
    </div>
    
    <div class="footer">
    <span class="typebar"></span>
    </div>
    </dl>

Bob
    Leaving now

Alice
    are you there yet?
    Where are you?

Bob
    I'm waiting outside
    wait I can see you now

Or just individual texts:
    
    
    <dl class="imessage">
    <div class="out sms">
    <dt>Bob</dt>
    <dd>Leaving now</dd>
    </div>
    
    <div class="in">
    <dt>Alice</dt>
    <dd>are you there yet?</dd>
    <dd>Where are you?</dd>
    </div>
    
    <div class="out">
    <dt>Bob</dt>
    <dd>I'm waiting outside</dd>
    <dd>wait I can see you now</dd>
    </div>
    
    <div class="footer">
    <span class="typebar"></span>
    </div>
    </dl>

Bob
    Leaving now

Alice
    are you there yet?
    Where are you?

Bob
    I'm waiting outside
    wait I can see you now


	10. Typing icon

### Skin
    
    
    /* weird tail*/
    .imessage .in dd.typing::before,
    .imessage .in dd.typing::after {
      content: "";
      position: absolute;
      border-radius: 100%;
      background: #e5e5ea;
      border: none;
    }
    .imessage .in dd.typing::after {
      bottom: 0;
      left: -0.15625rem;
      width: 0.625rem;
      height: 0.625rem;
    }
    .imessage .in dd.typing::before {
      bottom: -0.2083333333rem;
      left: -0.3125rem;
      width: 0.3125rem;
      height: 0.3125rem;
    }
    
    /* dots */
    .imessage .in dd.typing div {
      height: 0.625rem;
      width: 0.625rem;
      border-radius: 100%;
      background: #8e8e93;
      display: inline-block;
      margin: 0.125em 0;
    }
    .imessage .in dd.typing div:nth-child(1) {opacity: 0.4;}
    .imessage .in dd.typing div:nth-child(2) {opacity: 0.7;}
    .imessage .in dd.typing div:nth-child(3) {opacity: 1;}

### Demo
    
    
    <dl class="imessage">
    
    <div class="out">
    <dt>Alice</dt>
    <dd>are you there yet?</dd>
    <dd>Where are you?</dd>
    </div>
    
    <div class="in">
    <dt>Bob</dt>
    <dd class="typing"><div></div><div></div><div></div></dd>
    </div>
    
    </dl>

Alice
    are you there yet?
    Where are you?

Bob
    


	11. Rich links

### Skin
    
    
    .imessage dd.richlink {
      padding: 0;
      color: black;
      background: #e5e5ea !important;
    }
    /* Even outgoing texts are incoming-colored */
    .imessage dd.richlink::after {
      border-color: #e5e5ea !important;
    }
    
    .imessage dd.richlink a {
      display: table;
      font-size: 0.75rem;
      word-break: normal;
      text-decoration: none;
      border: none;
      border-top-left-radius: inherit;
      border-top-right-radius: inherit;
      overflow: hidden;
    }
    
    .imessage dd.richlink a iframe,
    .imessage dd.richlink a img {
      display: table-row;
      border: none;
      max-width: 100%;
    }
    /* default aspect ratio, 16:9 */
    .imessage dd.richlink a iframe {
      width: 210px;
      height: 118px;
    }
    /* aspect ratio 4:3 */
    .imessage dd.richlink a iframe[class="SD" i] {
      width: 210px;
      height: 157px;
    }
    /* tall narrow images can't be THAT big */
    .imessage dd.richlink a img {
      max-height: 250px;
    }
    
    .imessage dd.richlink a .caption {
      display: table-caption;
      caption-side: bottom;
      position: relative;
      margin: 1em 1.5em;
      color: #8e8e93;
    }
    .imessage dd.richlink a .caption b {
      display: block;
      margin-bottom: 0.5em;
      color: black;
    }
    
    /* arrow, if it's a video */
    .imessage dd.richlink a iframe + .caption {
      margin-right: 2.5em;
    }
    .imessage dd.richlink a iframe + .caption::after {
      content: "";
      position: absolute;
      right: -1em;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 0.75em;
      height: 0.75em;
      border-right: 1.5px solid #8e8e93;
      border-bottom: 1.5px solid #8e8e93;
      transform: rotate(-45deg);
    }

### Demo

For images, it's like this:
    
    
    <dl class="imessage">
    
    <div class="out">
    <dt>Alice</dt>
    <dd class="richlink">
    <a href="https://archiveofourown.org/" rel="nofollow">
    <img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Archive_of_Our_Own_logo.png" />
    <span class="caption"><b>Archive of Our Own</b> archiveofourown.org</span>
    </a>
    </dd>
    <dd>This image is long and narrow, so its narrower than it would otherwise be</dd>
    <dd class="richlink">
    <a href="https://www.etsy.com/listing/497173823/sale-was-198-beautiful-lace-cutout-black" rel="nofollow">
    <img src="https://i.etsystatic.com/8171320/r/il/4e6864/1100194486/il_1588xN.1100194486_emqy.jpg" />
    <span class="caption"><b>Sale- Was 198! Beautiful Lace Cutout Black Midi Cocktail Dress- The Sabine</b> etsy.com</span>
    </a>
    </dd>
    </div>
    
    </dl>

Alice
     [ **Archive of Our Own** archiveofourown.org](https://archiveofourown.org/)
    This image is long and narrow, so its narrower than it would otherwise be
     [ **Sale- Was 198! Beautiful Lace Cutout Black Midi Cocktail Dress- The Sabine** etsy.com ](https://www.etsy.com/listing/497173823/sale-was-198-beautiful-lace-cutout-black)

For videos it's like this:
    
    
    <dl class="imessage">
    <div class="out">
    <dt>Ricky</dt>
    <dd class="richlink">
    <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" rel="nofollow">
    <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>
    <span class="caption"><b>Rick Astley - Never Gonna Give You Up (Video)</b> youtube.com</span>
    </a>
    </dd>
    <dd>This video is from the 80s, and has the aspect ratio 4:3. Youtube forces everything into modern 16:9 in embedding, but vimeo keeps the old aspect ratio. So give it the class "SD" to reflect that.</dd>
    <dd class="richlink">
    <a href="https://vimeo.com/148751763" rel="nofollow">
    <iframe class="SD" src="https://player.vimeo.com/video/148751763"></iframe>
    <span class="caption"><b>Rick Astley - Never Gonna Give You Up</b> vimeo.com</span>
    </a>
    </dd>
    </div>
    
    </dl>

Ricky
     [ **Rick Astley - Never Gonna Give You Up (Video)** youtube.com ](https://www.youtube.com/watch?v=dQw4w9WgXcQ)
    This video is from the 80s, and has the aspect ratio 4:3. Youtube forces everything into modern 16:9 in embedding, but vimeo keeps the old aspect ratio. So give it the class "SD" to reflect that.
     [ **Rick Astley - Never Gonna Give You Up** vimeo.com ](https://vimeo.com/148751763)

**Works inspired by this one:**

  * [A Year in Messages](https://archiveofourown.org/works/22854187) by [Azdaema Codes (Azdaema)](https://archiveofourown.org/users/Azdaema/pseuds/Azdaema%20Codes), [Blankfreeze1958](https://archiveofourown.org/users/Blankfreeze1958/pseuds/Blankfreeze1958)
  * [In-Bread, Out-Bread (Shake it All About Bread)](https://archiveofourown.org/works/22445677) by [Azdaema](https://archiveofourown.org/users/Azdaema/pseuds/Azdaema)




End file.
